export default Tab
// 大致思路:在原型上增加功能,实例化对象(多个)调用

function Tab(el,options={}){
    this.el=document.querySelector(el)
    //初始化
    this.init()
}
Tab.prototype.init=function(){
    this.titleOver()
}
Tab.prototype.titleOver=function(){
    // 1.获取每个tab(this.el)下的所有li
    let ulliObj=this.el.querySelectorAll('ul li')
    // 2.遍历
    ulliObj.forEach((item,i)=>{      //this是tab1 tab2
        // 2.1给每个li标签绑定鼠标移入事件
        item.onmouseover=()=>{       //this是tab1  tab2
            // 2.1.1  给已经带有active样式的  清除
            this.el.querySelector('ul li.active').className=''
            // 2.1.2给当前的li标签(移入的)加active样式
            this.el.querySelectorAll('ul li')[i].className='active'

            // 2.1.3 同步内容
            // this.el.querySelector('ol li.active').className=''
            // this.el.querySelectorAll('ol li')[i].className='active'
            // 调用
            this.keepContent(i)


        }
    }) 
}

// 封装同步内容
Tab.prototype.keepContent=function(i){
    this.el.querySelector('ol li.active').className=''
    this.el.querySelectorAll('ol li')[i].className='active'
}

